<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>HTML5</title>

    <!-- @import -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/global.css"/>

    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->

    <!-- 测试代码开始：用于表示HTML基础结构，正式开发时可删除此段。-->
    <style>
        body {
            line-height: 2;
        }


        #header,
        #footer {
            background: #f5f5f5;
            color: #c00;
        }

        #container {
            background: #f5f5f5;
        }
    </style>
    <!-- 测试代码结束 -->

</head>

<body>

<!-- #header S -->
<header id="header">
    <div class="wrapper clearfix">

        header

    </div>
</header>
<!-- #header E -->

<!-- #nav S -->
<nav id="nav">
    <div class="wrapper clearfix">

        nav

    </div>
</nav>
<!-- #nav E -->

<!-- #content S -->
<article id="container">
    <div class="wrapper clearfix">

        <section class="switchable">

            <!-- focus demo - html -->
            <div id="focus">
                <ul class="targets">
                    <li class="item"><img src="images/focus1.png" alt=""/></li>
                    <li class="item"><img src="images/focus2.png" alt=""/></li>
                    <li class="item"><img src="images/focus3.png" alt=""/></li>
                    <li class="item"><img src="images/focus4.png" alt=""/></li>
                </ul>
                <div class="triggers"><a href="javascript:"></a><a href="javascript:"></a><a href="javascript:"></a><a href="javascript:"></a></div>
            </div>

        </section>

        <section class="artDialog">

            <a class="artDialog1" href="javascript:">普通对话框</a>
            <a class="artDialog2" href="javascript:">模态对话框</a>
            <a class="artDialog3" href="javascript:">气泡对话框</a>
            <span id="quickref-bubble">气泡气泡快出来~</span>

        </section>

    </div>
</article>
<!-- #content E -->

<!-- #footer S -->
<footer id="footer">

    <div class="wrapper clearfix">

        footer

    </div>

</footer>
<!-- #footer E -->

<!-- @import -->
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- artDialog - popup layer -->
<link rel="stylesheet" href="plugins/artDialog/css/ui-dialog.css"/>
<script src="plugins/artDialog/dist/dialog-min.js"></script>

<!-- switchable - slide, tab -->
<!--<script src="js/jquery.switchable-2.0.min.js"></script>-->

<!-- scrollTo -->
<script src="js/jquery.scrollto.js"></script>

<!-- form validation -->
<!--<script src="//cdn.bootcss.com/jquery-validate/1.14.0/jquery.validate.min.js"></script>-->

<!-- form ui - select -->
<!--<link href="//cdn.bootcss.com/chosen/1.4.2/chosen.min.css" rel="stylesheet">-->
<!--<script src="//cdn.bootcss.com/chosen/1.4.2/chosen.jquery.min.js"></script>-->


<script src="js/custom.js"></script>

<!--[if lte IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript"> DD_belatedPNG.fix(".PNGFIX");</script>
<script type="text/javascript">try {document.execCommand('BackgroundImageCache', false, true);} catch (e) {}</script>
<![endif]-->

</body>
</html>